<template>
  <a-card title="添加用户">
    <a-form
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>
      <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>
      <a-form-item label="角色" name="role" :rules="[{ required: true }]">
        <a-select v-model:value="formState.role">
          <a-select-option :value="1">管理员</a-select-option>
          <a-select-option :value="2">编辑者</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="性别" name="gender" :rules="[{ required: true }]">
        <a-select v-model:value="formState.gender">
          <a-select-option :value="0">保密</a-select-option>
          <a-select-option :value="1">男</a-select-option>
          <a-select-option :value="2">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="简介" name="introduction">
        <a-textarea
          v-model:value="formState.introduction"
          placeholder="请输入"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="头像" name="avatar">
        <a-upload
          :file-list="formState.fileList"
          name="file"
          :maxCount="1"
          list-type="picture-card"
          :show-upload-list="false"
          :customRequest="customRequest"
          @change="changeHandel"
        >
          <img v-if="formState.avatar" :src="formState.avatar" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
        <a-button type="primary" html-type="submit">添加</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>


<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Upload } from "@/api/common";
import { Register } from "@/api/user";
import { message } from "ant-design-vue";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";
const router = useRouter();
// 转换为非响应式数据
const formState = ref({
  username: "",
  password: "",
  role: 1,
  gender: 0,
  introduction: "",
  avatar: "",
});

const fileList = ref([]);
const loading = ref(false);

// 自定义上传
const customRequest = (e) => {
  const formData = new FormData();
  formData.append("file", e.file);
  loading.value = true;
  Upload(formData)
    .then((res) => {
      const { success, data, msg } = res;
      if (success) {
        const addFile = {
          ...e.file,
          status: "done",
          ...res,
        };
        e.onSuccess(addFile);
        loading.value = false;
      } else {
        e.onError();
        loading.value = false;
      }
    })
    .catch((err) => {
      e.onError(err);
    });
};

const changeHandel = ({ file }) => {
  if (file.status === "done") {
    const { response } = file;
    if (response.success) {
      formState.value.avatar = response.data;
    }
  }
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("只能上传jpg/png文件");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("图片大小不能超过 2MB!");
  }
  return isJpgOrPng && isLt2M;
};

// 提交
const onFinish = async (values) => {
  const { success, msg, data } = await Register(values);
  if (success) {
    message.success(msg);
    router.push("/user-manage");
    formState.value = {
      username: "",
      password: "",
      role: 2,
      gender: 0,
      introduction: "",
      avatar: "",
    };
    fileList.value = [];
  } else {
    message.error(msg);
  }
};
</script>


<style lang="scss" scoped>
.ant-upload {
  img {
    width: 102px;
    height: 102px;
    border-radius: 4px;
  }
}
</style>